<template>
	<view class="container">
		<view class="list" v-for="(item,index) in sessionList" :key="index">
			<image class="image" src="../../static/images/session.svg" @click="openSession(item,index)"></image>
			<view class="title" @click="openSession(item,index)">
				<view>{{ item.name }}</view>
			</view>
			<view class="date">{{item.date}}</view>
			<view class="operate">
                <!--				<uni-icons type="more-filled" size="20" @click="openMore(index)" class="uni_icons"></uni-icons>-->
                <view :tabindex="index"
                       @click="handleFocus(index)" @focus="handleFocus(index)" @blur="handleBlur(index)" class="handleInput"
                       :class="index === operationIndex?'active':''"></view>
                <view class="operation" ref="operation" v-if="index === operationIndex">
                    <view class="operation_btn" @click="delFn(item,index)">删除</view>
                    <view class="operation_btn" @click="editFn(item,index)">重命名</view>
                </view>
            </view>
		</view>

		<u-button class="createSession" @click="openSession" type="primary" text="开始问答"></u-button>
		<!-- 新建对话 -->
		<u-popup :show="show" @close="closePopup" :round="10" mode='bottom'>
			<view class="upload_popup">
				<view class="upload_type">
					<text>会话名称:</text>
					<u--input placeholder="请输入会话名称" clearable v-model="formData.name" :maxlength="20"></u--input>
				</view>
				<!-- <view class="upload_type">
					<text>文件类型:</text>
					<uni-data-select class="select" placeholder="文件类型" v-model="fileType" :localdata="range"
						@change="change"></uni-data-select>
				</view> -->
				<view class="bottom">
					<u-button text="取消" @click="emptyFn"></u-button>
					<u-button type='primary' text="确定" @click="sureFn" :disabled="!formData.name"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '../../utils/request';

	export default {
		data() {
			return {
				show: false,
				sessionList: [],
				formData: {
					name: '',
					id: ''
				},
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				operationIndex: -1
			}
		},
		onLoad() {
		},
		  onShow() {
		    // 在这里重新加载数据
		    this.getSession()
		  },
		onPullDownRefresh() {
			console.log('下拉刷新')
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		activated() {
			// this.sessionList = uni.getStorageSync('sessionList');
		},
		onReachBottom() {
			console.log('上拉加载更多')
		},
		// watch: {
		//   sessionList: {
		//     handler(newVal,oldVal){
		//       this.localPreserve();
		//     },
		//     deep:true
		//   }
		// },
		methods: {
			// 获取会话列表
			getSession() {
				this.$request({
					url: '/knowledgeQa/get',
					method: 'GET',
				}).then(({
					data
				}) => {
					console.log(data, 'fffff')
					this.sessionList = data.session;
				})
			},
			sessionDel(id) {
				this.$request({
					url: '/knowledgeQa/delete',
					method: 'post',
					data: {
						id
					}
				}).then(({
					data
				}) => {})
			},
			sessionStart(item) {
				this.$request({
					url: '/knowledgeQa/add',
					method: 'post',
					data: item
				}).then(({
					data
				}) => {
					console.log(data, 'fffff')
					this.getSession();
				})
			},
			scrolltolower() {
				this.loadmore()
			},
			// loadmore() {
			// 	for (let i = 0; i < 30; i++) {
			// 		this.sessionList.push({
			// 			url: this.urls[uni.$u.random(0, this.urls.length - 1)]
			// 		})
			// 	}
			// },
			openSession(item, index) {
				console.log(item, index)
				if (item) {
					uni.setStorageSync('sessionIndex', index);
					uni.navigateTo({
						url: 'message?sessionId=' + item.id
					});
				} else {
					uni.navigateTo({
						url: 'message?sessionId='
					});
				}
			},
			createFn() {
				this.show = true;
			},
			closePopup() {
				this.show = false;
			},
			emptyFn() {
				this.formData.name = ""
				this.show = false;
			},
			sureFn() {
				this.show = false;
				if (this.formData.id) {
					this.sessionList = this.sessionList.map(item => {
						if (this.formData.id === item.id) {
							this.sessionStart(this.formData)
							return {
								...item,
								name: this.formData.name
							}
						} else {
							return item
						}
					})
				} else {
					const message = {
						name: this.formData.name,
						messageList: [],
						date: this.dateFn(),
						id: new Date().getTime()
					}
					this.sessionList.unshift(message)
					
					this.sessionStart(message)
				}
				this.formData.name = "";
				this.formData.id = ""
				if (this.sessionList.length > 10) {
					this.sessionList.pop()
				}
				uni.setStorageSync('sessionList', this.sessionList);
				
			},
			dateFn() {
				const currentDate = new Date();

				const date =
                        `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')} ${String(currentDate.getHours()).padStart(2, '0')}:${String(currentDate.getMinutes()).padStart(2, '0')}:${String(currentDate.getSeconds()).padStart(2, '0')}`;
                console.log('date', date)
                return date
            },
            openMore(index) {
                this.operationIndex = index
                setTimeout(() => {
                    this.operationIndex = -1
                }, 3000)
            },
            handleFocus(index) {
                setTimeout(() => {
                    this.operationIndex = index
                }, 50)
            },
            handleBlur(index) {
                setTimeout(() => {
                    this.operationIndex = -1
                }, 50)
            },
            delFn(item, index) {
                this.sessionList.splice(index, 1)
                this.sessionDel(item.id)
                this.operationIndex = -1
                // uni.setStorageSync('sessionList', this.sessionList);
            },
            editFn(item, index) {
                this.show = true
                this.formData.id = item.id
                this.formData.name = item.name
				this.operationIndex = -1
				

			}
		},
	}
</script>

<style lang="scss" scoped>

	.container {
		width: 100%;
		height: 100%;
		overflow-y: auto;
        position: relative;

		.list {
			width: 100%;
			display: flex;
			height: 120rpx;
			padding: 20rpx;
			justify-content: space-between;
			background: white;
			align-items: center;
			border-bottom: 1rpx solid #E4E4E4;

			&:last-child {
				border: none !important;
			}

			&:hover {
				// background: #ebebeb;
			}

			.image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.title {
				flex: 1;

				view {
					width: 100%;
					word-break: break-all;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: Source Han Sans;
					color: #1C2126;
					font-size: 28rpx;
				}
			}

			.date {
				font-size: 25rpx;
			}

			.operate {
				padding-left: 20rpx;
			}

			view:nth-child(2) {
				width: 70%;
				display: flex;
				flex-direction: column;

				.name {
					font-size: 30rpx;
					font-weight: 500;
					margin-bottom: 5px;
					font-family: 思源黑体;
					color: #1C2126;
				}

				.info {
					font-size: 24rpx;
					color: #4C5A67;
					font-family: 思源黑体;

					text:nth-child(1) {
						margin-right: 20rpx;
					}

					.round {
						width: 20rpx;
						height: 20rpx;
						display: inline-block;
						margin-left: 10rpx;
					}

					.orange {
						background: #f59a23;
					}

					.red {
						background: #d9001b;
					}

					.green {
						background: #95f204;
					}
				}
			}

			// .operation {
			// 	// height: 300rpx;
			// 	width: 150rpx !important;
			// 	// background: red;
			// 	// border: 1px solid #8d8d8d;
			// 	position: absolute;
			// 	margin-right: 20rpx;
			// 	right: -10rpx;
			// 	z-index: 999999;
			// 	background: white;
			// 	margin-top: -10rpx;

			// 	view {
			// 		width: 100%;
			// 		display: flex;
			// 		justify-content: center;
			// 		font-size: 28rpx;
			// 		font-weight: 500;
			// 		padding: 6rpx;
			// 		text-align: center;
			// 	}
			// }
			.operation {
        width: 172rpx !important;
        position: absolute;
        margin-right: 20rpx;
        right: -10rpx;
        z-index: 999999;
        background: #ffffff;
        box-shadow: 0 2rpx 8rpx 0px rgba(170, 190, 206, 0.4);

        .operation_btn {
          width: 172rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-family: 思源黑体;
          font-size: 30rpx;
          color: #1c2126;
          &:hover,
          &:active {
            color: #0084ff;
            background: #f4f6f9;
          }
        }
      }
		}

		.createSession {
			position: absolute;
			bottom: 10rpx;
            left: 0;
            right: 0;
			width: calc(100% - 60rpx);
			height: 80rpx;
			background: #0084FF;
			opacity: 1;
		}

		.upload_popup {
			height: 300rpx;
			padding: 40rpx;

			// display: flex;
			// background: red;
			.upload_type {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100rpx;
				gap: 30rpx;
			}

			.uni-select {
				// width: 50%;
			}

			.bottom {
				width: 100%;
				display: flex;
				justify-content: space-between;
				position: absolute;
				bottom: 40rpx;
				left: 0;

				.u-button {
					width: 40%;
				}
			}
		}
	}

	::v-deep .uni_icons {
        &:hover,
        &:active {
          color: #0084ff !important;
        }
      }
</style>
<style lang="scss">
uni-page-body{
    height: 100%;
}
</style>